<template>
<div>
  <head title="Balance">
    <div class="rightBox" slot="right" @click="gonext('root:app/user/balance/bill.js')">
      <text class="rightTix">Bill</text>
    </div>
  </head>
  <div class="wrapper">
    <div class="topc">
      <div class="topLine">
        <text class="lineL"></text>
        <text class="lineC">Account Balance</text>
        <text class="lineR"></text>
      </div>
      <text class="acNum">{{balance}}</text>
      <text class="bBtn" @click="withDraw">Balance withdrawal</text>
    </div>
    <text class="titA">Withdrawal rules</text>
    <text class="tit">1. Over {{min_price}} can be withdrawn</text>
    <text class="tit">2. Rate {{(poundage-0)*100}}%</text>
    <text class="tit" v-if="content">3. {{content}}</text>
    <!-- <text class="tit">4. </text> -->
  </div>
  <div class="maskClack" @click="e=>e.stopPropagation()" v-if="isLoading">
    <floading class="indicator" color="#303030"></floading>
  </div>
</div>
</template>

<script>
const navigator = weex.requireModule("navigator");
const navbar = weex.requireModule("navbar");

import Utils from "../../../mixin/utils";
import { get_system_info, get_users_balance } from "../../../mixin/ajax.js";
import asCore from "../../../mixin/core";
export default {
  data() {
    return {
      balance: "0.00",
      poundage: "",
      content: "",
      min_price: ""
    };
  },
  created() {
    asCore.getBsessionid(userId => {
      this.getpageData(userId);
    });
  },
  methods: {
    getpageData(userId) {
      this.isLoading = true;
      get_users_balance(
        {
          users_id: userId
        },
        (res, flag) => {
          this.isLoading = false;
          if (flag) {
            if (res.code == 200) {
              if (res.data.balance) {
                this.balance = res.data.balance;
              }
            }
          }
        }
      );
      get_system_info({}, (res, flag) => {
        if (flag) {
          this.min_price = res.data.min_price;
          this.content = res.data.content;
          this.poundage = res.data.poundage;
        }
      });
    },
   
    onLoad() {
      if (!Utils.env.isWeb) {
        navigator.setRoot("balance");
        navigator.setPageId("balance");
      }
    },
    withDraw() {
      this.push("root:app/user/balance/withdrawal.js");
    },
    gonext(url, parmar) {
      this.push(url, parmar);
    }
  }
};
</script>

<style scoped="scoped" lang="less">
.wrapper {
  background-color: #f5f5f5;
  flex: 1;
}
.rightBox {
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  padding-left: 26px;
  padding-right: 26px;
  &:active {
    background-color: #222222;
  }
}
.rightTix {
  color: #ffffff;
  font-size: 28px;
}
.topc {
  background-color: #ffffff;
  height: 444px;
  width: 750px;
  align-items: center;
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.indicator {
  width: 40px;
  height: 40px;
}
.topLine {
  flex-direction: row;
  position: relative;
  margin-top: 80px;
  align-items: center;
}

.lineL {
  height: 1px;
  background-color: #e0bd83;
  width: 140px;
}

.lineR {
  height: 1px;
  background-color: #e0bd83;
  width: 140px;
}

.lineC {
  color: #e0bd83;
  margin: 0 30px;
  font-size: 28px;
}

.acNum {
  height: 123px;
  line-height: 123px;
  color: #1e1e1e;
  font-size: 88px;
  margin-top: 36px;
}

.titA {
  margin-top: 48px;
  font-size: 28px;
  padding-left: 32px;
  color: #333333;
  line-height: 40px;
}

.bBtn {
  margin-top: 37px;
  width: 505px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: #ba8833;
  color: #ffffff;
  font-size: 34px;
  border-radius: 60px;
}

.tit {
  font-size: 24px;
  padding-left: 32px;
  margin-top: 16px;
  line-height: 33px;
  color: #666;
}
</style>
